<template>
  <view class="points-display" :class="{ 'show-detail': showDetail }">
    <!-- 积分显示头部 -->
    <view class="points-header" @click="toggleDetail">
      <view class="points-main">
        <view class="points-icon">
          <up-icon customPrefix="iconfont" name="jinbi" size="32" color="#ff9500" ></up-icon>
        </view>
        <view class="points-info">
          <text class="points-value">{{ formatPoints(points) }}</text>
        </view>
      </view>
      <up-icon 
        :name="showDetail ? 'arrow-right' : 'arrow-down'" 
        size="24" 
        color="#999999" 
        :animation="true"
      />
    </view>
    
    <!-- 积分详情（可展开） -->
    <view class="points-detail" v-if="showDetail">
      <!-- 积分统计 -->
      <view class="points-stats" v-if="showStats">
        <view class="stat-item">
          <text class="stat-label">本月收入</text>
          <text class="stat-value">{{ formatPoints(monthlyIncome) }}</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-label">本月支出</text>
          <text class="stat-value expense">{{ formatPoints(monthlyExpense) }}</text>
        </view>
      </view>
      
      <!-- 积分记录 -->
      <view class="points-records" v-if="showRecords && records.length > 0">
        <view class="records-title">
          <text>最近积分变动</text>
          <text class="view-more" @click="navigateToRecords">查看更多 ></text>
        </view>
        
        <view class="records-list">
          <view 
            v-for="record in displayRecords" 
            :key="record.id" 
            class="record-item"
            :class="{ 'record-income': record.type === 'income' }"
          >
            <view class="record-icon">
              <u-icon 
                :name="record.type === 'income' ? 'plus-circle' : 'minus-circle'" 
                size="24" 
                :color="record.type === 'income' ? '#67c23a' : '#f56c6c'" 
              />
            </view>
            <view class="record-info">
              <text class="record-description">{{ record.description || getSourceText(record.source) }}</text>
              <text class="record-time">{{ formatTime(record.created_at) }}</text>
            </view>
            <text class="record-amount" :class="{ 'amount-income': record.type === 'income' }">
              {{ record.type === 'income' ? '+' : '-' }}{{ record.points }}
            </text>
          </view>
        </view>
      </view>
      
      <!-- 无记录提示 -->
      <view class="empty-records" v-if="showRecords && records.length === 0">
        <u-icon name="info-circle" size="48" color="#cccccc" />
        <text class="empty-text">暂无积分记录</text>
      </view>
      
      <!-- 积分规则 -->
      <view class="points-rules" v-if="showRules">
        <view class="rules-title">
          <text>积分规则</text>
        </view>
        <view class="rules-content">
          <view class="rule-item" v-for="(rule, index) in rules" :key="index">
            <u-icon name="right" size="16" color="#67c23a" />
            <text class="rule-text">{{ rule }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, ref, computed, watch } from 'vue';
import { usePointsStore } from '../store/points.js';
import { formatPoints as formatPointsUtil, formatTime as formatTimeUtil, formatRelativeTime } from '../utils/common.js';

export default defineComponent({
  name: 'PointsDisplay',
  props: {
    // 积分数量
    points: {
      type: Number,
      default: 0
    },
    // 标签文本
    label: {
      type: String,
      default: '我的积分'
    },
    // 是否可展开
    expandable: {
      type: Boolean,
      default: true
    },
    // 是否显示详情
    showDetail: {
      type: Boolean,
      default: false
    },
    // 是否显示统计
    showStats: {
      type: Boolean,
      default: true
    },
    // 是否显示记录
    showRecords: {
      type: Boolean,
      default: true
    },
    // 是否显示规则
    showRules: {
      type: Boolean,
      default: false
    },
    // 是否显示排行榜入口
    showLeaderboard: {
      type: Boolean,
      default: true
    },
    // 显示的记录数量
    recordsCount: {
      type: Number,
      default: 5
    },
    // 积分记录列表
    records: {
      type: Array,
      default: () => []
    },
    // 本月收入
    monthlyIncome: {
      type: Number,
      default: 0
    },
    // 本月支出
    monthlyExpense: {
      type: Number,
      default: 0
    },
    // 积分规则
    rules: {
      type: Array,
      default: () => [
        '完成任务可获得相应积分',
        '积分可用于兑换奖励',
        '积分长期有效，不会过期',
        '每日签到可获得额外积分'
      ]
    }
  },
  emits: ['expand', 'collapse', 'viewRecords', 'viewLeaderboard'],
  setup(props, { emit }) {
    const pointsStore = usePointsStore();
    const showDetail = ref(props.showDetail);
    
    // 监听props变化
    watch(() => props.showDetail, (newValue) => {
      showDetail.value = newValue;
    });
    
    // 格式化积分显示
    const formatPoints = (value) => {
      return formatPointsUtil(value);
    };
    
    // 格式化时间
    const formatTime = (timestamp) => {
      if (!timestamp) return '';
      return formatRelativeTime(timestamp);
    };
    
    // 获取来源文本
    const getSourceText = (source) => {
      return pointsStore.getPointsSourceText(source);
    };
    
    // 计算显示的记录
    const displayRecords = computed(() => {
      return props.records.slice(0, props.recordsCount);
    });
    
    // 切换详情显示
    const toggleDetail = () => {
      if (!props.expandable) return;
      
      showDetail.value = !showDetail.value;
      
      if (showDetail.value) {
        emit('expand');
      } else {
        emit('collapse');
      }
    };
    
    // 跳转到积分记录页面
    const navigateToRecords = () => {
      emit('viewRecords');
      // 实际项目中可以跳转到记录页面
      // uni.navigateTo({ url: '/pages/points-records/points-records' });
    };
    
    // 跳转到排行榜页面
    const navigateToLeaderboard = () => {
      emit('viewLeaderboard');
      // 实际项目中可以跳转到排行榜页面
      // uni.navigateTo({ url: '/pages/leaderboard/leaderboard' });
    };
    
    return {
      showDetail,
      formatPoints,
      formatTime,
      getSourceText,
      displayRecords,
      toggleDetail,
      navigateToRecords,
      navigateToLeaderboard
    };
  }
});
</script>

<style lang="scss" scoped>
.points-display {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.points-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  
  &:active {
    opacity: 0.8;
  }
  
  .points-main {
    display: flex;
    align-items: center;
  }
  
  .points-icon {
    margin-right: 12px;
  }
  
  .points-info {
    .points-label {
      display: block;
      font-size: 14px;
      color: #666666;
      margin-bottom: 4px;
    }
    
    .points-value {
      display: block;
      font-size: 24px;
      font-weight: 700;
      color: #ff9500;
    }
  }
}

.points-detail {
  animation: slideDown 0.3s ease;
  
  &.show-detail {
    animation: slideUp 0.3s ease;
  }
}

.points-stats {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  
  .stat-item {
    flex: 1;
    text-align: center;
    
    .stat-label {
      display: block;
      font-size: 14px;
      color: #666666;
      margin-bottom: 4px;
    }
    
    .stat-value {
      display: block;
      font-size: 20px;
      font-weight: 600;
      color: #67c23a;
      
      &.expense {
        color: #f56c6c;
      }
    }
  }
  
  .stat-divider {
    width: 1px;
    background-color: #f0f0f0;
    margin: 0 16px;
  }
}

.points-records {
  padding: 16px 0;
  
  .records-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    text {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }
    
    .view-more {
      font-size: 14px;
      color: #409eff;
      font-weight: normal;
    }
  }
  
  .records-list {
    .record-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-icon {
        margin-right: 12px;
      }
      
      .record-info {
        flex: 1;
        
        .record-description {
          display: block;
          font-size: 14px;
          color: #333333;
          margin-bottom: 4px;
        }
        
        .record-time {
          display: block;
          font-size: 12px;
          color: #999999;
        }
      }
      
      .record-amount {
        font-size: 16px;
        font-weight: 600;
        color: #f56c6c;
        
        &.amount-income {
          color: #67c23a;
        }
      }
    }
  }
}

.empty-records {
  text-align: center;
  padding: 32px 0;
  
  .empty-text {
    display: block;
    font-size: 14px;
    color: #999999;
    margin-top: 12px;
  }
}

.points-rules {
  padding: 16px 0;
  
  .rules-title {
    margin-bottom: 12px;
    
    text {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }
  }
  
  .rules-content {
    .rule-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 8px;
      
      .rule-text {
        flex: 1;
        font-size: 14px;
        color: #666666;
        line-height: 1.5;
        margin-left: 8px;
      }
    }
  }
}

.leaderboard-entry {
  margin-top: 12px;
  
  .leaderboard-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background-color: #fff8e6;
    border-radius: 8px;
    cursor: pointer;
    
    &:active {
      opacity: 0.8;
    }
    
    .leaderboard-text {
      flex: 1;
      font-size: 14px;
      color: #ff9500;
      margin: 0 8px;
    }
  }
}

// 动画效果
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

// 深色模式适配
:global(.dark-theme) .points-display {
  background-color: #1e1e1e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  .points-header {
    border-bottom-color: #333333;
  }
  
  .points-stats {
    border-bottom-color: #333333;
    
    .stat-divider {
      background-color: #333333;
    }
    
    .stat-label {
      color: #999999;
    }
  }
  
  .records-title {
    text {
      color: #ffffff;
    }
  }
  
  .record-item {
    border-bottom-color: #333333;
    
    .record-description {
      color: #ffffff;
    }
    
    .record-time {
      color: #666666;
    }
  }
  
  .empty-text {
    color: #666666;
  }
  
  .rules-title {
    text {
      color: #ffffff;
    }
  }
  
  .rule-text {
    color: #999999;
  }
  
  .leaderboard-content {
    background-color: #3a2c1b;
    
    .leaderboard-text {
      color: #ffc107;
    }
  }
}
</style>